<template>
  <div class="order-page">
    <!-- Header 部分 -->
    <el-row class="order-header" justify="space-between" align="middle">
      <!-- 搜索框 -->
      <el-col :span="16">
        <div class="search-container">
          <el-input
              v-model="searchQuery"
              placeholder="搜索历史订单"
              class="search-input"
              style="width: 300px;"
              clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button
              type="primary"
              @click="handleSearch"
              class="search-button"
              style="margin-left: 10px;"
          >
            搜 索
          </el-button>
          <!-- 查看历史订单按钮 -->
          <el-button
              @click="showHistory = !showHistory"
              type="primary"
              class="search-button"
              style="text-align: center"
          >
            <el-icon>
              <i class="el-icon-time"></i>
            </el-icon>
            {{showHistory?'隐藏历史订单':'查看历史订单'}}
          </el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 当前订单展示（未完成交易的订单） -->
    <div v-if="!showHistory">
      <el-card class="order-card"
               v-for="order in filteredNotHistoricalOrders"
               :key="order.id">
        <div class="order-title">
          <span>订单号：{{ order.id }}</span>
        </div>

        <el-progress
            :percentage="getOrderProgress(order)"
            :status="getProgressStatus(order)"
            :text-inside="true"
        ></el-progress>

        <el-divider></el-divider>

        <div class="order-status">
          当前状态：
          <span>{{ getOrderStatus(order) }}</span>
        </div>
        <!-- 商品信息展示 -->
        <div class="order-products">
          <el-row class="product-row">
            <el-col :span="12">
              <div class="product-name" :title="order.produtname">{{ order.productname }}</div>
              <div>单价：￥{{ order.totalprice.toFixed(2) }}</div>
            </el-col>
            <el-col :span="12" class="text-right">
              <div>数量：1</div>
              <div>总价：￥{{ (order.totalprice).toFixed(2) }}</div>
            </el-col>
          </el-row>
        </div>

        <!-- 按钮并列显示 -->
        <el-row>
          <el-col :span="8">
            <el-button
                type="warning"
                @click="handleAfterSales(order)"
                style="width: 100%;"
            >
              <el-icon><DocumentAdd /></el-icon>
              申请售后
            </el-button>
          </el-col>

          <!-- 新增的“查看历史售后”按钮，仅在存在历史记录时显示 -->
          <el-col :span="8" v-if="order.hasAfterSalesHistory">
            <el-button
                type="info"
                @click="handleViewHistory(order)"
                style="width: 100%;"
            >
              <el-icon><i class="el-icon-document"></i></el-icon>
              查看历史售后
            </el-button>
          </el-col>
          <el-col :span="8">
            <el-button
                type="danger"
                :disabled="!canCancelOrder(order)"
                @click="cancelOrder(order.id)"
                style="width: 100%;"
            >
              <el-icon><i class="el-icon-close"></i></el-icon>
              取消订单
            </el-button>
          </el-col>
          <el-col :span="8">
            <el-button
                type="success"
                :disabled="!canConfirmReceipt(order)"
                @click="confirmReceipt(order.id)"
                style="width: 100%;"
            >
              <el-icon><i class="el-icon-check"></i></el-icon>
              确认收货
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 历史订单展示（已完成交易的订单） -->
    <div v-else>
      <el-card
          v-for="order in filteredHistoricalOrders"
          :key="order.id"
          class="order-card"
      >
        <div class="order-title">
          <span>历史订单号：{{ order.id }}</span>
        </div>

        <el-button
            type="primary"
            style="margin-top: 10px;"
            @click="handleViewLogistics(order)"
        >
          查看物流信息
        </el-button>

        <el-divider></el-divider>

        <!-- 商品信息展示 -->
        <div class="order-products">
          <el-row class="product-row">
            <el-col :span="12">
              <div class="product-name" :title="order.produtname">{{ order.productname }}</div>
              <div>单价：￥{{ order.totalprice.toFixed(2) }}</div>
            </el-col>
            <el-col :span="12" class="text-right">
              <div>数量：1</div>
              <div>总价：￥{{ (order.totalprice).toFixed(2) }}</div>
            </el-col>
          </el-row>
        </div>

        <el-divider></el-divider>

        <div class="order-status">
          当前状态：
          <span>{{ getOrderStatus(order) }}</span>
        </div>

        <el-progress
            :percentage="getOrderProgress(order)"
            :status="getProgressStatus(order)"
            :text-inside="true"
        ></el-progress>
      </el-card>
    </div>

    <!-- 申请售后弹窗 -->
    <el-dialog v-model="showApplyDialog" title="申请售后" width="600px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="问题标题">
          <el-input v-model="form.title" placeholder="请输入问题标题" />
        </el-form-item>

        <el-form-item label="问题描述">
          <el-input
              v-model="form.description"
              type="textarea"
              :rows="4"
              placeholder="请详细描述您遇到的问题"
          />
        </el-form-item>

        <el-form-item label="上传凭证">
          <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              :on-change="handleUpload"
              :file-list="fileList"
              multiple
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showApplyDialog = false">取消</el-button>
        <el-button type="primary" @click="submitApplication">提交申请</el-button>
      </template>
    </el-dialog>

    <!-- 售后状态详情页弹窗 -->
    <el-dialog v-model="showStatusDialog" title="售后状态详情" width="600px">
      <div class="status-detail">
        <!-- 售后状态步骤条 -->
        <el-steps :active="statusActive" finish-status="success">
          <el-step title="提交申请" description="您的申请已提交，等待商家处理" />
          <el-step title="商家处理中" description="商家正在处理您的请求" />
          <el-step :title="statusTitle" :description="statusDescription" />
        </el-steps>

        <!-- 申请信息 -->
        <div class="application-info">
          <h4>申请信息：</h4>
          <p><strong>问题标题：</strong>{{ currentApplication?.title }}</p>
          <p><strong>问题描述：</strong>{{ currentApplication?.description }}</p>
        </div>

        <!-- 图片凭证 -->
        <div class="evidence-box" v-if="currentApplication?.evidence?.length">
          <h4>上传凭证：</h4>
          <div class="image-grid">
            <el-image
                v-for="(img, index) in currentApplication.evidence"
                :key="index"
                :src="img.url"
                fit="cover"
                class="evidence-image"
                style="width: 528px; height: 528px;"
            />
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog v-model="showHistoryDialog" title="售后记录列表" width="600px">
      <el-table :data="afterSalesHistoryList" style="width: 100%">
        <el-table-column prop="applicationId" label="申请ID" width="100" />
        <el-table-column prop="productTitle" label="问题标题" />
        <el-table-column prop="saleType" label="类型" width="120" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="small" @click="viewApplicationDetail(scope.row.applicationId)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <el-button @click="showHistoryDialog = false">关闭</el-button>
      </template>
    </el-dialog>

    <el-dialog
        v-model="showLogisticsDialog"
        title="物流信息"
        width="500px"
    >
      <div v-if="logisticsInfo.id">
        <p><strong>物流公司：</strong>{{ logisticsInfo.logisticsCompany }}</p>
        <p><strong>物流单号：</strong>{{ logisticsInfo.logisticsNo }}</p>
        <p><strong>物流状态：</strong>{{ logisticsInfo.logisticsStatus }}</p>
      </div>
      <div v-else>
        <p>暂无物流信息</p>
      </div>

      <template #footer>
        <el-button @click="showLogisticsDialog = false">关闭</el-button>
      </template>
    </el-dialog>


  </div>
</template>

<script setup>
import { reactive,ref, computed,onMounted } from 'vue';
import { ElButton, ElCard, ElProgress, ElDivider, ElRow, ElCol, ElInput, ElIcon } from 'element-plus';
import {useRouter} from 'vue-router';
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import { DocumentAdd, Plus } from '@element-plus/icons-vue'
import axios from "axios";
// 申请售后弹窗状态

const isAddingToCart = ref(false);// 新增这个响应式数据用于控制按钮加载状态
// 假设之前从localStorage获取用户信息并解析的代码逻辑如下（如果已经在其他地方做了此操作，可直接使用获取到的用户ID）
const userInfo = JSON.parse(localStorage.getItem('xm-pro-user'));
const buyerid = userInfo.id;
console.log('用户ID为：',buyerid);
console.log('用户id类型为：',typeof buyerid);
const router = useRouter();

const orders =reactive([]);//存储订单数据
const historicalOrders = ref([]);
const showHistory =ref(false);
const searchQuery =ref([]);
// 在原有代码基础上新增以下内容
const showApplyDialog = ref(false)
const showStatusDialog = ref(false)
const currentOrder = ref(null)
const fileList = ref([])
const statusActive = ref(1)
const statusTitle = ref('处理完成')
const statusDescription = ref('您的售后申请已处理完成')
const afterSalesHistoryList = ref([]); // 当前订单的所有售后记录
const showHistoryDialog = ref(false);  // 控制“历史售后列表”弹窗显示

// 新增一个响应式数据，用于弹窗控制 & 存放物流信息
const showLogisticsDialog = ref(false);
const logisticsInfo = reactive({
  id: null,
  orderId: null,
  logisticsCompany: '',
  logisticsNo: '',
  logisticsStatus: ''
});

function handleViewLogistics(order) {
  // 调用接口
  request.get(`/logistics/getlogistics/${order.id}`).then(res => {
    if (res.code === '200' && res.data) {
      const data = res.data;
      // 将后端返回的物流信息赋值给 logisticsInfo
      logisticsInfo.id = data.id;
      logisticsInfo.orderId = data.orderId;
      logisticsInfo.logisticsCompany = data.logisticsCompany;
      logisticsInfo.logisticsNo = data.logisticsNo;
      logisticsInfo.logisticsStatus = data.logisticsStatus;
    } else {
      // 如果没有查询到物流信息
      logisticsInfo.id = null;
      logisticsInfo.orderId = order.id;
      logisticsInfo.logisticsCompany = '';
      logisticsInfo.logisticsNo = '';
      logisticsInfo.logisticsStatus = '暂无物流信息';
    }
    showLogisticsDialog.value = true;
  }).catch(err => {
    console.error('获取物流信息失败', err);
    ElMessage.error('获取物流信息失败，请稍后重试');
  });
}

const form = reactive({
  title: '',
  description: '',
})

//获取用户订单数据
const fetchOrders = () => {
    request.get(`/order/selectById/${buyerid}`).then(res =>{
      if (res.msg === '成功'){
        console.log('用户订单数据:', res.data);
        const sortedOrders = res.data.map(order => ({
          ...order,
          afterSalesStatus: order.afterSalesStatus || 'not_applied',
          hasAfterSalesHistory: !!order.applicationId  // 或后端返回历史记录数组长度大于0
        }));

        // 使用 splice 确保 Vue 响应性更新数组
        orders.splice(0, orders.length, ...sortedOrders);
      } else {
        ElMessage({
          message: "获取订单数据失败",
          type: "error",
        });
      }
    }).catch(err => {
      console.error("获取订单数据失败", err);
      ElMessage({
        message: "获取订单数据失败，请稍后重试",
        type: "error",
      });
    });
};

// 获取订单进度
const getOrderProgress = (order) => {
  let progress = 0;

  // 计算进度：根据订单的各个状态字段来增加进度
  if (order.confirmation === '未确认') progress += 10;
  if (order.confirmation === '已确认') progress += 20;   // 已确认，20%
  if (order.stockup === '已备货') progress += 20;          // 备货完成，20%
  if (order.sendorder === '已发货') progress += 20;        // 已发货，20%
  if (order.completion === '完成') progress += 40;         // 完成交易，40%

  // 返回进度（最大值为 100）
  return Math.min(progress, 100); // 确保最大值为 100
};


// 获取订单状态的函数
const getOrderStatus = (order) => {
  // 优先检查 completion 状态
  if (order.completion === '完成') return '交易完成';
  if (order.sendorder === '已发货') return '已发货';
  if (order.stockup === '已备货') return '已备货';
  if (order.confirmation === '已确认') return '已确认';
  if (order.confirmation === '未确认') return '未确认';

  return '未知状态'; // 如果没有匹配的状态
};

// 判断是否可以取消订单
const canCancelOrder = (order) => {
  const orderStatus = getOrderStatus(order);
  return orderStatus !== '已发货' && orderStatus !== '交易完成';
};

// 判断是否可以确认收货
const canConfirmReceipt = (order) => {
  return getOrderStatus(order) === '已发货';
};

// 获取订单进度状态
const getProgressStatus = (order) => {
  console.log(getOrderStatus(order)); // 打印 status 值，确保它符合预期
  if (getOrderStatus(order) === '交易完成') return 'success';

  if (getOrderStatus(order) === '未确认') return 'warning';
  return 'active';
};

// 取消订单
const cancelOrder = (orderId) => {
  request.delete(`/order/buyerCancel/${orderId}`).then((res)=>{
    if (res.msg === '成功'){
      ElMessage({
        message:'订单已取消',
        type:'success',
      });
    }else {
      ElMessage({
        message:'取消订单失败',
        type:'error',
      });
    }
  }).catch((err)=>{
    console.log('取消订单失败',err);
    ElMessage({
      message:'取消订单失败，请稍后重试',
      type:'error',
    });
  });
};

// 确认收货
const confirmReceipt = (orderId) => {
  //const orderId = orders.value[index].id;//获取订单id
  request.put(`/order/completion/${orderId}`).then((res)=>{
    if (res.msg === '成功'){
      // 更新订单状态，成功后移除该订单或者修改订单状态
      const order = orders.find(order => order.id === orderId);
      if (order) {
        order.status = '交易完成';  // 修改订单状态为已完成
      }
      ElMessage({
        message: '确认收货成功',
        type: 'success',
      });
    }else {
      ElMessage({
        message:'确认收货失败，请稍后重试',
        type:'error',
      });
    }
  }).catch((err)=>{
    console.log('确认收货失败',err);
    ElMessage({
      message:'确认收货失败，请稍后重试',
      type:'error',
    });
  });
};

// 过滤历史订单
const filteredHistoricalOrders = computed(() => {
  return orders.filter(order => getOrderStatus(order) === '交易完成');
});
//过滤非交易完成
const filteredNotHistoricalOrders = computed(() => {
  return orders.filter(order => getOrderStatus(order) !== '交易完成');
});

// 搜索历史订单
const handleSearch = () => {
  if (searchQuery.value.trim() === '') {
    alert('请输入搜索内容');
    return;
  }
};

onMounted(() => {
  fetchOrders(); // 页面加载时获取订单数据
});
const currentApplication = reactive({
  title: '',
  description: '',
  timestamp: '',  // 用于显示时间戳
  evidence: [],   // 用于显示上传的凭证
  statusStep: 0,  // 当前步骤，0表示已提交，1表示处理中，2表示已完成
  finalStatus: {  // 最终状态
    title: '',
    description: '',
  },
})

const handleUpload = (file, fileListRaw) => {
  fileList.value = fileListRaw;
};
const handleAfterSales = (order) => {
  showApplyDialog.value = true;
  currentOrder.value = order;
};
// const handleViewHistory = (order) => {
//   const applyId = order.applicationId; // 使用订单中的 applicationId 获取售后详情
//   if (!applyId) {
//     ElMessage.error('该订单没有售后历史记录');
//     return;
//   }
//
//   // 调用接口获取售后详情
//   request.get(`/aftersale/detail/${applyId}`).then(res => {
//     if (res.code === '200') {
//       const data = res.data;
//
//       // 显示售后状态详情弹窗
//       showStatusDialog.value = true;
//       currentApplication.title = data.productTitle;
//       currentApplication.description = data.productDescription;
//       currentApplication.evidence = data.productImages
//           ? data.productImages.split(',').map(url => ({ url }))
//           : [];
//
//       // 显示状态条和描述
//       updateStatusByCode(data.applicationStatus, data.resultType);
//     } else {
//       ElMessage.error('获取售后详情失败: ' + res.msg);
//     }
//   }).catch(err => {
//     console.error('售后详情获取异常', err);
//     ElMessage.error('售后详情获取失败，请稍后重试');
//   });
// };
const updateStatusByCode = (statusCode, resultType) => {
  switch (statusCode) {
    case 0:
      statusActive.value = 1;
      statusTitle.value = '待商家处理';
      statusDescription.value = '您的申请已提交，等待商家处理';
      break;
    case 1:
      statusActive.value = 2;
      statusTitle.value = '商家处理中';
      statusDescription.value = '商家正在处理您的请求';
      break;
    case 2:
      statusActive.value = 3;
      statusTitle.value = resultType || '处理完成';
      statusDescription.value = `您的售后申请已处理完成，类型为：${resultType}`;
      break;
    default:
      statusActive.value = 1;
      statusTitle.value = '状态未知';
      statusDescription.value = '未能识别当前售后状态';
  }
};
const handleViewHistory = (order) => {
  request.get(`/aftersale/history?orderId=${order.id}`).then(res => {
    if (res.code === '200') {
      const rawList = res.data.list;
      console.log('售后历史列表：', rawList);

      afterSalesHistoryList.value = Array.isArray(rawList) ? rawList : [];

      if (afterSalesHistoryList.value.length === 0) {
        ElMessage.warning('该订单暂无历史售后记录');
        return;
      }

      showHistoryDialog.value = true;
    } else {
      ElMessage.error('获取历史售后失败：' + res.msg);
    }
  }).catch(err => {
    console.error(err);
    ElMessage.error('获取历史售后失败，请稍后重试');
  });
};
const viewApplicationDetail = (applyId) => {
  if (!applyId || applyId === 'undefined') {
    ElMessage.error('申请 ID 无效');
    return;
  }

  request.get(`/aftersale/detail/${applyId}`).then(res => {
    if (res.code === '200') {
      const data = res.data;

      console.log('详情数据:', data);

      currentApplication.title = data.productTitle;
      currentApplication.description = data.productDescription;
      currentApplication.evidence = data.productImages
          ? data.productImages.split(',').map(url => ({ url }))
          : [];

      updateStatusByCode(data.applicationStatus, data.resultType);
      showStatusDialog.value = true;
    } else {
      ElMessage.error('获取售后详情失败: ' + res.msg);
    }
  }).catch(err => {
    console.error(err);
    ElMessage.error('售后详情获取失败，请稍后重试');
  });
};

const submitApplication = async () => {
  const imageUrls = [];

  console.log('准备上传文件：', fileList.value);
  for (const file of fileList.value) {
    if (!file.raw) {
      console.warn('未找到 raw 文件，跳过此文件:', file);
      continue;
    }

    const formData = new FormData();
    formData.append('file', file.raw);

    try {
      const res = await axios.post('http://localhost:8080/files/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });

      if (res.data?.code === '200' && res.data.data) {
        imageUrls.push(res.data.data); // ✅ 保存返回的图片 URL
      } else {
        console.warn('上传成功但返回结构异常', res.data);
      }

    } catch (e) {
      console.error('图片上传失败：', e);
    }
  }


  console.log('最终拼接图片链接:', imageUrls);

  const payload = {
    orderId: currentOrder.value.id,
    productTitle: form.title,
    productDescription: form.description,
    productImages: imageUrls.join(','), // 以逗号拼接字符串
    saleType: '退货退款'
  };

  request.post('/aftersale/apply', payload).then(res => {
    console.log('提交售后返回：', res);

    if (res.code === '200') {
      ElMessage.success('售后申请提交成功');

      const match = res.data.match(/申请ID为[:：](\d+)/);
      if (match) {
        const applyId = parseInt(match[1]);
        currentOrder.value.applicationId = applyId;

        // 这里是关键，更新原订单列表
        const updatedOrder = orders.find(order => order.id === currentOrder.value.id);
        if (updatedOrder) {
          updatedOrder.applicationId = applyId;
          updatedOrder.hasAfterSalesHistory = true;
        }
      } else {
        ElMessage.warning('申请成功但未能解析申请ID');
        return;
      }

      currentOrder.value.afterSalesStatus = 'applied';
      currentOrder.value.application = {
        ...payload,
        status: 'pending'
      };

      form.title = '';
      form.description = '';
      fileList.value = [];
      showApplyDialog.value = false;

    } else {
      ElMessage.error('售后申请提交失败: ' + res.msg);
    }
  }).catch(err => {
    console.error('售后申请异常', err);
    ElMessage.error('提交售后申请失败，请稍后重试');
  });
};

// 更新售后状态显示
const updateStatus = (status) => {
  switch (status) {
    case 'pending':
      statusActive.value = 1
      statusTitle.value = '待商家处理'
      statusDescription.value = '您的申请已提交，等待商家处理'
      break
    case 'processing':
      statusActive.value = 2
      statusTitle.value = '商家处理中'
      statusDescription.value = '商家正在处理您的请求'
      break
    case 'refunded':
      statusActive.value = 3
      statusTitle.value = '已退款'
      statusDescription.value = '您的退款已处理完成'
      break
    case 'returned':
      statusActive.value = 3
      statusTitle.value = '已退货'
      statusDescription.value = '您的退货已处理完成'
      break
    default:
      statusActive.value = 1
      statusTitle.value = '待商家处理'
      statusDescription.value = '您的申请已提交，等待商家处理'
  }
}
</script>

<style scoped>
.order-page {
  max-width: 900px;
  margin: 20px auto;
}

.order-card {
  margin-bottom: 20px;
}

.order-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-status {
  margin-top: 10px;
}

.text-right {
  text-align: right;
}

.el-divider {
  margin: 15px 0;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.order-header {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.search-input {
  width: 300px;
}

.search-button {
  margin-left: 10px;
}

.product-row {
  margin-bottom: 10px;
}

.product-row .el-col {
  padding: 0;
}

.product-name {
  white-space: nowrap;  /* 保证商品名称不换行 */
  overflow: hidden;     /* 隐藏超出的部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  cursor: pointer;
  color: #333;
}

.el-button {
  display: flex;
  align-items: center;
}

.el-icon {
  margin-right: 5px;
  gap: 10px;
}

.search-input {
  flex: 1;
  max-width: 400px;
}

.search-button {
  min-width: 100px;
}

.order-card {
  margin-bottom: 20px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.order-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
}

.order-status {
  font-size: 14px;
  color: #666;
  margin: 10px 0;
}

.order-status span {
  color: #409eff;
  font-weight: 500;
}

.product-row {
  margin: 15px 0;
}

.product-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.text-right {
  text-align: right;
  color: #666;
}

.el-button {
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.el-button--warning {
  background: linear-gradient(135deg, #ffba00, #ff9a00);
  border: none;
  color: #fff;
}

.el-button--warning:hover {
  opacity: 0.9;
}

.el-button--danger {
  background: linear-gradient(135deg, #ff4d4f, #ff7875);
  border: none;
  color: #fff;
}

.el-button--danger:hover {
  opacity: 0.9;
}

.el-button--success {
  background: linear-gradient(135deg, #52c41a, #73d13d);
  border: none;
  color: #fff;
}

.el-button--success:hover {
  opacity: 0.9;
}

:deep(.el-dialog) {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-dialog__header) {
  background: #409eff;
  border-radius: 12px 12px 0 0;
  padding: 15px 20px;
}

:deep(.el-dialog__title) {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-steps) {
  margin: 20px 0;
}

:deep(.el-step__head) {
  font-size: 14px;
}

:deep(.el-step__title) {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

:deep(.el-step__description) {
  font-size: 12px;
  color: #666;
}

:deep(.el-step.is-success .el-step__head) {
  color: #52c41a;
  border-color: #52c41a;
}

:deep(.el-step.is-process .el-step__head) {
  color: #409eff;
  border-color: #409eff;
}

.application-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin: 20px 0;
}

.application-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
}

.application-info p {
  font-size: 14px;
  color: #666;
  margin: 8px 0;
}

.application-info strong {
  color: #333;
  font-weight: 500;
}

:deep(.el-form-item__label) {
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
}

:deep(.el-input__inner) {
  border-radius: 8px;
}

:deep(.el-textarea__inner) {
  border-radius: 8px;
}

:deep(.el-upload--picture-card) {
  background: #f8f9fa;
  border: 1px dashed #ddd;
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-upload--picture-card:hover) {
  border-color: #409eff;
  background: #e6f7ff;
}

:deep(.el-dialog__footer) {
  text-align: right;
  padding: 15px 20px;
  background: #f8f9fa;
  border-radius: 0 0 12px 12px;
}

:deep(.el-button) {
  min-width: 100px;
}
</style>
